<script setup>
import { defineProps } from 'vue'
import { useSystemSettingStore } from '@/store/systemSetting'


const systemSettingStore = useSystemSettingStore()
const props = defineProps({
  title:{
    type:String,
    default:''
  },
})

</script>

<template>
  <div class="LxCard-title w-full flex items-center">
    <h2 class="lx-card-title-text">{{ title }}</h2>
  </div>
</template>

<style scoped lang="less">
.lx-card-title-text {
  @widthGap: 10px;
  @lineWidth: 4px;
  position: relative;
  left: @widthGap;
  &:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -@widthGap;
    width: @lineWidth;
    height: 100%;
    border-radius: 6px;
    background-color: v-bind('systemSettingStore.ui.primaryColor');
  }
}
</style>